<!doctype html>
<html lang="zh-CN">
  <head>
    <title>黑马影视-online</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/medile.css" rel="stylesheet" type="text/css" />
  <body>
    <div id="app">
      <!--banner-->
      <div class="header">
        <div class="container">
          <br />
          <div class="w3layouts_logo">
            <a href="#"
              ><h1>黑马<span>影视</span></h1></a
            >
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
      <div class="movies_nav">
        <div class="container">
          <nav class="navbar navbar-default">
            <div
              class="collapse navbar-collapse navbar-right"
              id="bs-example-navbar-collapse-1"
            >
              <nav>
                <ul class="nav navbar-nav">
                  <li class="active"><a href="/">首页</a></li>
                  <li><a href="#">类型 </a></li>
                  <li><a href="#">电视连续剧</a></li>
                  <li><a href="#">最新电影</a></li>
                  <li><a href="#">最热电影</a></li>
                  <li><a href="#">国家</a></li>
                </ul>
              </nav>
            </div>
          </nav>
        </div>
      </div>

      <!--焦点图-->
      <div class="ad">
        <ul class="slider">
          <li v-for="banner in bannerList"><img :src="banner.picPath" /></li>
        </ul>
        <ul class="num">
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
      </div>

      <!-- 影视列表 -->
      <div class="general" id="generalContent">
        <h4 class="latest-text w3_latest_text">影视列表</h4>
        <div class="container">
          <div
            class="bs-example bs-example-tabs"
            role="tabpanel"
            data-example-id="togglable-tabs"
          >
            <ul id="myTab" class="nav nav-tabs" role="tablist">
              <li
                role="presentation"
                :class="index==0?'active':''"
                v-for="(value,key,index) in movieListMap"
              >
                <a :href="'#home'+index" role="tab" data-toggle="tab"
                  >{{key}}</a
                >
              </li>
            </ul>
            <div id="myTabContent" class="tab-content">
              <div
                role="tabpanel"
                v-for="(value,key,index) in movieListMap"
                :class="index==0?'tab-pane fade active in':'tab-pane fade'"
                :id="'home'+index"
                aria-labelledby="home-tab"
              >
                <div class="w3_agile_featured_movies">
                  <div
                    v-for="movie in value"
                    class="col-md-2 w3l-movie-gride-agile"
                  >
                    <a
                      :href="'/single.html?id='+movie.id"
                      class="hvr-shutter-out-horizontal"
                    >
                      <img
                        :src="movie.picPath"
                        title="album-name"
                        style="width: 150px; height: 200px"
                        class="img-responsive"
                        alt=" "
                      />
                      <div class="w3l-action-icon">
                        <i class="fa fa-play-circle" aria-hidden="true"></i>
                      </div>
                    </a>
                    <div class="mid-1 agileits_w3layouts_mid_1_home">
                      <div class="w3l-movie-text">
                        <h6><a href="single.html">{{movie.title}}</a></h6>
                      </div>
                      <div class="mid-2 agile_mid_2_home">
                        <p>{{movie.showTime}}</p>
                        <div class="clearfix"></div>
                      </div>
                    </div>
                    <div class="ribben">
                      <p>NEW</p>
                    </div>
                  </div>
                  <div class="clearfix"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- footer -->
      <div class="footer">
        <div class="container">
          <div class="w3ls_footer_grid">
            <div class="col-md-6 w3ls_footer_grid_left">
              <div class="w3ls_footer_grid_left1">
                <h2>订阅我们</h2>
                <div class="w3ls_footer_grid_left1_pos">
                  <form action="#" method="post">
                    <input
                      type="email"
                      name="email"
                      placeholder="你的邮箱..."
                      required=""
                    />
                    <input type="submit" value="发送" />
                  </form>
                </div>
              </div>
            </div>
            <div class="col-md-6 w3ls_footer_grid_right">
              <a href="index.html"
                ><h2>heima<span>Movies</span></h2></a
              >
            </div>
            <div class="clearfix"></div>
          </div>
          <div class="col-md-5 w3ls_footer_grid1_left">
            <p>Copyright &copy; 2020.传智播客教育股份有限公司版权所有。</p>
          </div>
          <div class="col-md-7 w3ls_footer_grid1_right">
            <ul>
              <li>
                <a href="genres.html">电影</a>
              </li>
              <li>
                <a href="faq.html">常见问题</a>
              </li>
              <li>
                <a href="horror.html">动作</a>
              </li>
              <li>
                <a href="genres.html">冒险</a>
              </li>
              <li>
                <a href="comedy.html">喜剧</a>
              </li>
              <li>
                <a href="icons.html">图标</a>
              </li>
              <li>
                <a href="contact.html">联系我们</a>
              </li>
            </ul>
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
  <script type="text/javascript" src="/js/pic.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script type="text/javascript" src="/js/axios-0.18.0.js"></script>
  <script type="text/javascript" src="/js/vuejs-2.5.16.js"></script>
  <!--Vue的代码写到这里-->
  <script type="text/javascript">
    const app = new Vue({
      el: "#app",
      data: {
        bannerList: [],
        movieListMap: {},
      },
      methods: {
        //首页轮播图(5个)
        findBannerList() {
          axios.get("/index/findBannerList").then((resp) => {
            if (resp.data.code == 1) {
              console.log(resp);
              this.bannerList = resp.data.data.list;
            }
          });
        },

        //首页分类影视资源
        findMovieListMap() {
          axios.get("/index/findMovieListMap").then((resp) => {
            if (resp.data.code == 1) {
              this.movieListMap = resp.data.data;
            }
          });
        },
      },
      watch: {},
      created() {
        this.findBannerList();
        this.findMovieListMap();
      },
    });
  </script>
</html>
